<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import UserFriend from '/@/views/chat/components/UserInfo/UserFriend.vue'
import ChatGroup from '/@/views/chat/components/UserInfo/ChatGroup.vue'
import AllUser from '/@/views/chat/components/UserInfo/AllUser.vue'
import UserApply from '/@/views/chat/components/UserInfo/UserApply.vue'

const activeName = ref<string>('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
  <div>
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="好友信息" name="first">
        <UserFriend></UserFriend>
      </el-tab-pane>

      <el-tab-pane label="群聊信息" name="second">
        <ChatGroup></ChatGroup>
      </el-tab-pane>

      <el-tab-pane label="所有好友" name="third">
        <AllUser></AllUser>
      </el-tab-pane>

      <el-tab-pane label="申请好友通知" name="fourth">
        <UserApply></UserApply>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.flesh {
  margin-bottom: 20px;
}
</style>
